{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加简历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Vue-->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <!-- zui -->
    <link href="https://cdn.bootcss.com/zui/1.8.1/css/zui-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css" rel="stylesheet">
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });

        window.onload = function () {
            new Vue({
                el: '#works',
                data: {
                    workData: [],
                    name: '',
                    position: '',
                    introduce: '',
                    nowIndex: -1000,
                    prizeData: [],
                    prizename: ''
                },
                methods: {
                    add: function () {
                        if (this.introduce != "" && this.name != "" && this.position != "") {
                            this.workData.push({
                                name: this.name,
                                position: this.position,
                                introduce: this.introduce,
                            });

                            this.name = '';
                            this.position = '';
                            this.introduce = '';
                        } else {
                            new $.zui.Messager('不能为空', {
                                type: 'warning',
                                icon: 'heart',
                                placement: 'top' // 定义显示位置
                            }).show();
                        }

                    },
                    add_prize: function () {
                        if (this.prizename != "") {
                            this.prizeData.push({
                                prizename: this.prizename,
                            });

                            this.prizename = '';
                        } else {
                            new $.zui.Messager('不能为空', {
                                type: 'warning',
                                icon: 'heart',
                                placement: 'top' // 定义显示位置
                            }).show();
                        }

                    },
                    deleteMsg: function (n, data) {
                        if (data == "prize") {
                            msgDdata = this.prizeData;
                        } else {
                            msgDdata = this.workData;
                        }
                        if (n == -2) {
                            msgDdata = [];
                        } else {
                            msgDdata.splice(n, 1);
                        }
                    },
                    submit: function () {
                        $.ajax({
                            type: 'post',
                            url: '{% url 'recommendation:pubResume' %}',
                            dataType: 'json',
                            data: {"work": JSON.stringify(this.workData),
                                "prize": JSON.stringify(this.prizeData),
                            "myform":JSON.stringify($('#myform').serialize())},
                            success: function (data) {
                                new $.zui.Messager('发布成功', {
                                type: 'warning',
                                icon: 'heart',
                                placement: 'top' // 定义显示位置
                            }).show();

                                window.setTimeout("window.location.replace(\"/\");", 2000);
                            },
                            error: function (data) {
                                alert(data.work);
                            }

                        });

                    }
                }
            });

        };
    </script>
</head>
<body>

<div class="container" id="works">


    <form  method="post" class="form" id="myform">
        {% bootstrap_form form %}
    </form>
    <form role="form" class="form-horizontal ">
        <div class="row">
            <div class="form-group  col-md-2">
                <label for="name">项目名称：</label>
                <input type="text" id="name" class="form-control" placeholder="输入项目名称" v-model="name">
            </div>
            <div class="form-group col-md-2">
                <label for="position">职务:</label>
                <input type="text" id="position" class="form-control" placeholder="输入职务" v-model="position">
            </div>
            <div class="form-group col-md-8">
                <label for="introduce">项目介绍:</label>
                <input type="text" id="introduce" class="form-control" placeholder="输入项目介绍" v-model="introduce">
            </div>
        </div>
        <div class="form-group">
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h3 text-info">作品表</caption>
        <tr class="text-danger">
            <th class="text-center">序号</th>
            <th class="text-center">名称</th>
            <th class="text-center">职务</th>
            <th class="text-center">介绍</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(item, index) in workData">
            {% verbatim %}
            <td>{{index+1}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.position }}</td>
            <td>{{ item.introduce }}</td>
            {% endverbatim %}
            <td>
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                        v-on:click="nowIndex=index,data='work'">删除
                </button>
            </td>
        </tr>
        <!--<tr v-show="workData.length!=0">-->
        <!--<td colspan="5" class="text-right">-->
        <!--<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer">-->
        <!--删除全部-->
        <!--</button>-->
        <!--</td>-->
        <!--</tr>-->
        <tr v-show="prizeData.length==0">
            <td colspan="5" class="text-center text-muted">
                <p>暂无数据....</p>
            </td>
        </tr>
    </table>


    <form role="form" class="form-horizontal">
        <div class="row">
            <div class="form-group  col-md-12">
                <label for="name">经历：</label>
                <input type="text" id="prizename" class="form-control" placeholder="输入项目名称" v-model="prizename">
            </div>
        </div>
        <div class="form-group">
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add_prize()">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h3 text-info">奖项、经历</caption>
        <tr class="text-danger">
            <th class="text-center col-lg-3">序号</th>
            <th class="text-center">名称</th>
            <th class="text-center col-lg-3">操作</th>
        </tr>
        <tr class="text-center" v-for="(item, index) in prizeData">
            {% verbatim %}
            <td>{{index+1}}</td>
            <td>{{ item.prizename }}</td>
            {% endverbatim %}
            <td>
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                        v-on:click="nowIndex=index,data='prize'">删除
                </button>
            </td>
        </tr>
        <tr v-show="workData.length==0">
            <td colspan="5" class="text-center text-muted">
                <p>暂无数据....</p>
            </td>
        </tr>
    </table>
    <button class="btn btn-primary " v-on:click="submit()">
        提交
    </button>
    <!--模态框 弹出框-->
    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">确认删除么?</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-body text-right">
                    <button data-dismiss="modal" class="btn btn-primary ">取消</button>
                    <button data-dismiss="modal" class="btn btn-danger " v-on:click="deleteMsg(nowIndex,data)">确认
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>